<template>
	<div class="tab-body">
    <div class="operator" style="display: flex">
      <div class="search" style="width: 400px;display: flex">
        <el-input v-model="searchParams.key" clearable @input="search" prefix-icon="el-icon-search"></el-input>
      </div>
      <div  style="margin-left: auto">
        <el-button type="primary" icon="el-icon-plus" @click="toSave()">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="batchRemove()">批量删除</el-button>
      </div>

    </div>
    <div class="dataTable autoFlex" v-if="listData">
			<el-table class="table" :data="listData.records" stripe border height="auto" @selection-change="selectionChange" v-loading="listLoading">
						<el-table-column type="selection" width="55" fixed="left"></el-table-column>
						<el-table-column prop="supplierName" label="供应商" width="120"></el-table-column>
						<el-table-column prop="name" label="设备名称" width="120"></el-table-column>
						<el-table-column label="设备类别">
              <template slot-scope="scope">
                <span>{{ getEquipmentType(scope.row.category) }}</span>
              </template>
            </el-table-column>
						<el-table-column prop="brand" label="设备品牌" width="120"></el-table-column>
						<el-table-column prop="model" label="设备规格/型号" width="150"></el-table-column>
						<el-table-column prop="referenceData" label="参考数据" width="120"></el-table-column>
						<el-table-column prop="manufacturer" label="生产厂家" width="150"></el-table-column>
						<el-table-column prop="rent" label="租金"></el-table-column>
						<el-table-column prop="laborPrice" label="人工"></el-table-column>
						<el-table-column prop="oilCost" label="油费"></el-table-column>
						<el-table-column prop="repair" label="维修"></el-table-column>
						<el-table-column prop="price" label="价格"></el-table-column>
						<el-table-column prop="remarks" label="备注" width="250"></el-table-column>
<!--						<el-table-column prop="crtm" label="创建时间"></el-table-column>-->
<!--						<el-table-column prop="mdtm" label="修改时间"></el-table-column>-->
<!--						<el-table-column prop="crer" label="创建者"></el-table-column>-->
<!--						<el-table-column prop="mder" label="修改者"></el-table-column>-->
				<el-table-column label="操作" fixed="right" width="250px">
					<template slot-scope="scope">
						<div class="dataTable-operator">
							<el-button size="mini" icon="el-icon-search" @click="toDetail(scope.$index, scope.row)">详情</el-button>
              <el-button size="mini" icon="el-icon-edit" @click="toUpdate(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-delete" type="danger" @click="remove(scope.$index, scope.row)">删除</el-button>
            </div>
					</template>
				</el-table-column>
			</el-table>
			<div class="pageBar">
				<el-pagination
				@size-change="sizeChange"
				@current-change="currentChange"
				:total="listData.total"
				:page-size="page.size"
				:current-page="page.current"
				:layout="this.$constant.page.layout"
				:page-sizes="this.$constant.page.pageSizes"></el-pagination>
			</div>
		</div>
		<edit ref="edit"></edit>
	</div>
</template>
<script>
import edit from './edit.vue';
import api from '@/api/supplier/equipment/equipment.js';
import dictionaryApi from '@/api/components/biz/selectOptionDictionary/selectOptionDictionary.js';

export default {
	name: 'equipment',
	components: {
		edit
	},
	data() {
		return {
			searchParams: {},
			isShowMoreSearch: false,
			listLoading: false,
			listData: [],
			selected: [],
			page: new this.$constant.pageObj(),
      equipmentTypeList:[]
		};
	},
	methods: {
		//获取数据
		list() {
			this.listLoading = true;
			let params = this.$utils.merger(this.searchParams, this.page);
			api.list(params, response => {
				this.listData = response.data;
				this.listLoading = false;
			})
		},
		//去添加
		toSave() {
			this.$refs.edit.open({}, '添加');
		},
		//去编辑
		toUpdate(index, row) {
			let editParameter = {
				id: row.id
			};
			this.$refs.edit.open(editParameter, '编辑');
		},
		//去详情
		toDetail(index, row) {
			let detailParameter = {
				id: row.id
			};
			this.$refs.edit.open(detailParameter, '详情', true);
		},
		//删除
		remove(index, row) {
			let parameter = {
				ids: row.id
			}
			this.$utils.confirm.warning('提示', '确定删除吗？', () => {
				api.remove(
					parameter,
					response => {
						this.$utils.msg.success(response.msg);
						this.list();
					},
					response => {
						this.$utils.msg.warning(response.msg);
					}
				);
			});
		},
		//批量删除
		batchRemove() {
			if (!this.selected || this.selected.length == 0) {
				this.$utils.msg.info('请选择至少一行');
				return;
			}
			let parameter = {
				ids: this.selected
			};
			this.$utils.confirm.warning('提示', '确定删除吗？', () => {
				api.remove({
						ids: this.selected
					},
					response => {
						this.$utils.msg.success(response.msg);
						this.list();
					},
					response => {
						this.$utils.msg.warning(response.msg);
					}
				);
			});
		},
		//改变选择项
		selectionChange(val) {
			//清空
			this.selected = [];
			for (let item of val) {
				this.selected.push(item.id);
			}
		},
		//改变每页显示数量
		sizeChange(val) {
			this.page.size = val;
			this.list();
		},
		//改变现在的页码
		currentChange(val) {
			this.page.current = val;
			this.list();
		},

		//搜索
		search() {
			this.list();
		},
		//清空搜索框
		clearSearchVal() {
			this.searchParams = {};
		},
    //获取设备类型列表
    getEquipmentTypeList(){
      let param = {
        dkey:'equipment-type'
      }
      dictionaryApi.list(param, response=>{
        this.equipmentTypeList = response.data
      })
    },
    getEquipmentType(val){
      let data = val
      try {
        this.equipmentTypeList.forEach((e,i)=>{
          if (e.dvalue==val){
            data =  e.dkey
            throw new Error('success')
          }
        })
      }catch (e){

      }
      return data
    }
	},
	mounted() {
		this.list();
    this.getEquipmentTypeList()
	}
};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
</style>

